<template>
  <div class="app-container user-info">
    
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="起始时间">
         <el-date-picker
          v-model="queryParams.dates"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-card shadow="never" class="box-card">
      <div class="text item">
        <table>
          <tr>
            <td style="background-color: gainsboro;">我的渠道</td>
            <td>老黄的工作室</td>
            <td style="background-color: gainsboro;">渠道结算方式</td>
            <td>按注册结算</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">邀请任务量</td>
            <td>10000</td>
            <td style="background-color: gainsboro;">任务时间</td>
            <td>2020年1月1日~2020年1月30日</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">邀请注册总人数</td>
            <td>10000</td>
            <td style="background-color: gainsboro;">用户单价</td>
            <td>￥9</td>
          </tr>
          <tr>
            <td style="background-color: gainsboro;">二级渠道总收入</td>
            <td>￥8888</td>
            <td style="background-color: gainsboro;">我的累计收入</td>
            <td>￥11111</td>
          </tr>
        </table>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div class="text item">
        <el-table v-loading="loading" :data="channelList" >
          <el-table-column label="二级渠道名称" align="center" prop="name" width="120" :show-overflow-tooltip="true"/>
          <el-table-column label="累计注册用户数及收入" align="center" prop="channelId" width="80"/>
          <el-table-column label="用户单价" align="center" prop="channelLink" :show-overflow-tooltip="true"/>
          <el-table-column label="本次任务量" align="center" prop="contactPerson" />
          <el-table-column label="本次任务已完成" align="center" prop="contactPhone" />
          <el-table-column label="本次任务总收入" align="center" prop="wechat" />
        </el-table>
      </div>
    </el-card>
    
  </div>
</template>

<script>

export default {
  data() {
    return {
      loading:false,
      channelList:[],
      queryParams:{
        dates: []
      }
    };
  },
  created() {
  },
  methods: {
    init(userId){

    }
  }
};
</script>
<style>
.user-info table{
  border-spacing: inherit;
  border-collapse: collapse;
  width: 100%;
}
.user-info table tr td{
  border: 1px solid ;
  text-align: center;
  padding: 15px 0px;
}
.user-head{
      width: 150px;
    height: 150px;
    margin-top: 20px;
    border-radius: 20px;
}
.head-div{
  background-color: gainsboro;
  text-align: center;
  padding: 2px;
  border: 1px solid;
  border-right: 0;
}
</style>
